import { useState } from 'react'

const a = null
const FirstPage = () => {
    // let arr = ['孙悟空', '猪八戒', '沙和尚']
    const [arr, setArr] = useState(['孙悟空', '猪八戒', '沙和尚'])
    const [content, setContent] = useState('Hello World')
    return (
        <div>
            <h1>{content}</h1>
            {a && <h2>a为null</h2>}
            <div>
                {arr.map((item) => (
                    <div key={item}>{item}</div>
                ))}
            </div>
            <button
                onClick={() => {
                    if (arr.includes('唐僧')) {
                        arr.reverse()
                        setArr([...arr])
                    } else {
                        arr.unshift('唐僧')
                        setArr([...arr])
                    }
                    // console.log(newArr);
                }}
            >
                添加唐僧
            </button>
            <button
                onClick={() => {
                    setContent('Hello Vite!')
                    arr.unshift('唐僧')
                }}
            >
                Hello Vite!
            </button>
        </div>
    )
}

export default FirstPage
